<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>攻略</title>
    <link rel="stylesheet" type="text/css" href="./src/assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="./src/assets/css/main.css">
    <script src="./src/assets/js/vue.min.js"></script>
    <script src="./src/assets/js/touch-0.2.14.min.js"></script>
    <script src="./src/assets/js/jquery.min.js"></script>
    <script src="./src/assets/js/iconfont.js"></script>
  </head>
  <body id="target" >
    <div id="app">

   <!--    <my-component></my-component>



       -->
       <!-- 0.2 -->
       <!-- 0.3 -->
<!--       <div class="in_top">
         <div class="in_top_square"></div>
         <div class="in_top_square"></div>
      </div>
 -->      <div class="topMenu">
        <span class="topMenu_home">星月区 fdfdfdfdfd</span>
        <span class="topMenu_people">个人中心</span>
      </div>
      <div class="in_user" @click="userList">
        <svg class="icon peopleIcon" aria-hidden="true">
          <use xlink:href="#icon-yidiandiantubiao08"></use>
        </svg>
      </div>
      <div class="in_mark" v-if="isUserList" @click="closeUserList('mark')"></div>
      <div class="in_userList" v-if="isUserList">
        <div class="in_userListLine" >
          <user1 :data1="data1" @changeshow="changeshow" @changeshow2="changeshow2"></user1>
        </div>

      </div>
      <div class="in_mainAll" >
         <div class="in_mainAll_top"></div>
         <div id="in_mainAll">
           <ul class="in_header">
            <li class="in_header_type in_header_active">全部</li>
            <li class="in_header_type">新闻</li>
            <li class="in_header_type">游戏攻略</li>
          </ul>
          <!-- <a href="http://www.tourforce.vip/images/bus.png" target="_blank">fdfdfdfdf</a> -->
          <!-- <div class="div1">"touch.js demo记录每一次操作"</div> -->
          
          <div class="in_main">
            <div class="in_main_cell" v-for="cell in cellArray">
              
              <img  class="in_main_cell_img" src="./src/assets/images/img1.jpg">
              <div class="in_main_cell_content">
                <div class="in_main_cell_title">{{cell.title}}</div>
                <div class="in_main_cell_time">{{cell.time}}</div>
              </div>
            </div>


          </div>
          <!-- 左滑出现 侧边栏 -->
          <div class="in_rightBox" id="in_rightBox">
            <div class="in_rightBox_top"></div>
            <ul class="in_rightBox_listBox">
              <li class="in_rightBox_list"></li>
              <li class="in_rightBox_list"></li>

              <li class="in_rightBox_list"></li>
              <li class="in_rightBox_list"></li>
              <li class="in_rightBox_list"></li>
              <li class="in_rightBox_list"></li>
              <li class="in_rightBox_list"></li>
              <li class="in_rightBox_list"></li>
              <li class="in_rightBox_list"></li>
              <li class="in_rightBox_list"></li>
              <li class="in_rightBox_list"></li>

            </ul>
          </div>
         </div>
      </div>
    </div>
    <script type="text/javascript">
      var user3=Vue.extend({
            template:'<div><div class="in_userListLine3" v-for="item in data3">{{item.name }}</div></div>',
    
            props:{
              data3:[],
              // ccc:''
            },
            // data:function(){
            //   return {
            

            //   }
            // },
            mounted(){
         
            },
            methods:{
              
            }
      })
      var user2=Vue.extend({
            template:'<div><div  v-for="(item,index) in data2"><div class="in_userListLine2"  @click="user2Show(item.isShow2,index)">{{item.name }}</div><user3 :data3="item.child" v-if="item.isShow2"> </user3></div></div>',
            components:{
                "user3":user3,

            },
            props:{
              data2:[],
              index:Number
            },
            data:function(){
              return {

              }
            },
            mounted(){
              
            },
            methods:{
              user2Show(isShow,index){
                if(isShow === false){
                  this.$emit('changeshows',true,index,this.index)
                }else{
                  this.$emit('changeshows',false,index,this.index)
                }
                
              }
            }
      })
      Vue.component("user1",{
        template:'<div><div v-for="(item,index) in data1"><div class="in_userListLine1" @click="user1Show(item.isShow1,index)">{{item.name }}<span>{{ item.position }}</span></div><user2 :index="index" :data2="item.child" @changeshows="changeshows" v-if="item.isShow1"></user2></div></div>',
        components:{
          "user2":user2
        },
        props:{
          data1:[],
          
        },
        data:function(){
          return {
          }
        },
        mounted(){},
        methods:{
          changeshows(isShow,index,num){
            if(isShow === false){
              this.$emit('changeshow2',isShow,index,num)
            }else{
              this.$emit('changeshow2',isShow,index,num)
            }
          },
          user1Show(isShow,index){
            if(isShow === false){
              // alert(index)
              this.$emit('changeshow',true,index)
            }else{
              this.$emit('changeshow',false,index)
            }
            
          }
        }
    })
      var Vue = new Vue({
        el: '#app',
        components:{},
        data: {
          isUserList:false,
          abc:'dfd',
          data1:[{
            name:'二三仔',
            position:'盟主',
            url:"",url:"",
            isShow1:false,
            child:[
              {
                name:'团1',
                url:"",
                isShow2:false,
                child:[
                  {
                    name:'班1',
                    url:"",
                  },
                  {
                    name:'班1'
                  }
                ]
              },
              {
                name:'团2',
                isShow2:false,
                child:[
                  {
                    name:'班2'
                  },{
                    name:'班2'
                  }
                ]
              }
            ]
          }],
          cellArray: [
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
          ],
          rightBoxShow:false,
        },
        mounted:function(){
          this.start()
        },
        methods: {
          start:function(){
            let height = window.screen.availHeight 
            // let height = document.body.offsetHeight
            console.log(height)
            // let height = window.screen.height
            document.getElementById("in_mainAll").style.height = (height - 58) + "px"
            document.getElementById("in_rightBox").style.height = (height - 56) + "px"
            // console.log(document.getElementById("newMain").style.height)

            // document.querySelector(".newMain").style.height = height + "px"
          },
          changeshow2(isShow,index,num){
            // alert(index)
            this.data1[num].child[index].isShow2 = isShow
          },
          userList(){
            this.isUserList = true
          },
          changeshow:function(isShow,index){
            // alert(isShow)
            this.data1[index].isShow1 = isShow
          },
          closeUserList(type){
            if(type === 'mark'){
              this.isUserList = false
            }else if(type === 'list'){
              this.isUserList = false
            }
            
          }
        
        },

      })

      $(function() {
        var target = document.getElementById("target");
        touch.on(target, 'swiperight', function(ev) {
           $('.div1').text("向右滑动.");
             $('.in_rightBox').hide()
        });
        touch.on(target, 'swipeleft', function(ev) {
           $('.div1').text("向左滑动.");
            $('.in_rightBox').show()
        });
      });

      // https://www.cnblogs.com/hemude7788/p/5937202.html
    </script>
  </body>
</html>
